<template>
    <div class="com-cnt">
        <div class="goodslist">
            <div class="goods" v-for="(goods,goodsindex) in goodslist">
                <mt-checklist v-model="value" :options="[goods.commodity.title]" @change="checkon(goodsindex)"></mt-checklist>
                <div class="goodsimg"><img :src="goods.commodity.picture" alt="商品"></div>
                <div>
                    <p class="ptprice">平台价： {{goods.commodity.price}} 元</p>
                    <p class="jfprice">会员价： {{goods.commodity.pointPrice}} 元</p>
                </div>
                <!-- <p class="changenum"> 数量： <span @click="goods.number>=2?goods.number--:1">-</span><span>{{goods.number}}</span><span @click="goods.number++">+</span></p> -->
                <p class="changenum" v-if="goods.commodity.classifyId == 3"> 数量： <span class="goodsnumcon">{{goods.number}}</span></p>
                <p class="changenum" v-else> 数量： <span @click="deletes(goods)">-</span><span class="goodsnumcon">{{goods.number}}</span><span @click="addnum(goods)">+</span></p>
            </div>
        </div>
        <div>
            <mt-checklist v-model="allvalue" :options="['全选']" @change="allcheck" style="width:30%;float:left">
            </mt-checklist>
            <p class="deletechecked" @click="deletegoods">删除</p>
        </div>
        
        <div class="buynow">
            <div class="buyinfo">
                <span class="pttotalprice">平台价： {{totalPrice}}</span>
                <span class="jftotalprice">会员价： {{totalPointPrice}}</span>
            </div>
            <button class="buybtn" @click="buynow">
                立即购买
            </button>
        </div>

    </div>
</template>

<script>
    import { domain } from '@/assets/js/config'
    import { Checklist } from 'mint-ui'
    // import { Cell } from 'mint-ui'
    import $ from 'jquery'
    import Qs from 'qs'
    import axios from 'axios'
    import { maskTips } from '@/assets/js/dom'
    export default {
        name: 'shopcarPage',
        components:{
            
        },
        data(){
            return{
                goodslist: [],
                value: [],
                allvalue: [],
                allcheckvalue: [],
                totalPrice: 0,
                totalPointPrice: 0,
                checked: {},
                alldata: {}
            }
        },
        mounted(){
            var that = this
            var userToken = localStorage.getItem("token") || '' //用户token值
            axios({
                url: domain + '/xshk/f/shoppingCar/list?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify(postDo)
            }).then(res => { that.listsucc(res) }).catch(err => { that.listerr(err) })
        },
        methods : {
            
            checkon: function(goodsindex){
                console.log(this.allcheckvalue)
                this.checked[goodsindex] = !this.checked[goodsindex]
                console.log(this.checked)
                //获取选中长度
                var checklength = 0
                for(var key in this.checked){
                    if(this.checked[key]){
                        checklength++
                    }
                }
                if(checklength==this.goodslist.length){
                    this.allvalue = ['全选']
                }else{
                    this.allvalue = []
                }
                this.figureAllPrice()
            },
            figureAllPrice: function(){
                this.totalPrice = 0
                this.totalPointPrice = 0
                for(var j=0;j<this.goodslist.length;j++){
                    if(this.checked[j]){
                        this.totalPrice += Number((Number(this.goodslist[j].commodity.price)*Number(this.goodslist[j].number)).toFixed(1))
                        this.totalPrice = Number(this.totalPrice.toFixed(1))
                        this.totalPointPrice += Number((Number(this.goodslist[j].commodity.pointPrice)*Number(this.goodslist[j].number)).toFixed(1))
                    }
                }
            },
            listerr: function(err){
                console.log(err)
            },
            listsucc: function(res){
                console.log(res.data)
                this.goodslist = res.data.data.list
                this.alldata = res.data.data
                for(let i=0;i<this.goodslist.length;i++){
                    this.allcheckvalue[i] = this.goodslist[i].commodity.title
                }
            },
            allcheck: function(){
                console.log(this.value)
                console.log(this.allvalue)
                // this.value = []
                if(this.value.length < this.goodslist.length){
                    this.value = this.allcheckvalue
                    for(var k=0;k<this.goodslist.length;k++){
                        this.checked[k] = true
                    }
                    console.log(this.checked)
                    this.figureAllPrice()
                }else{
                    this.value = []
                    for(var l=0;l<this.goodslist.length;l++){
                        this.checked[l] = false
                    }
                    this.figureAllPrice()
                }
            },
            //立即购买
            buynow: function(){
                var carId = ''
                var numbers = ''
                for(var n in this.checked){
                    if(this.checked[n]){
                        carId += this.goodslist[n].id + ','
                        numbers += this.goodslist[n].number + ','
                    }
                }
                carId = carId.substring(0,carId.length-1)
                numbers = numbers.substring(0,numbers.length-1)
                this.$router.push({
                    path:'/orderDetail',
                    query:{
                        source: 1,
                        carId: carId,
                        numbers: numbers
                    }
                })
            },
            //数量减
            deletes: function(goods){
                goods.number>=2?goods.number--:1
                this.figureAllPrice()
            },
            //数量加
            addnum: function(goods){
                goods.number++
                this.figureAllPrice()
            },
            //删除商品
            deletegoods: function(){
                var that = this
                var postData = ''
                for(var j=0;j<this.goodslist.length;j++){
                    if(this.checked[j]){
                        postData += "\'" +this.goodslist[j].id+ "\',"
                    }
                }
                postData = postData.substring(0,postData.length-1)
                var userToken = localStorage.getItem("token") || '' //用户token值
                var postparam = {id:postData}
                axios({
                    url: domain + '/xshk/f/shoppingCar/delShoppingCar?token=' + userToken,
                    method: 'post',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    data: Qs.stringify(postparam)
                }).then(res => { that.delsucc(res) }).catch(err => { that.delerr(err) })
            },
            //删除成功
            delsucc: function(res){
                console.log(res)
                if(res.data.code === 0)
                    //maskTips({id:'delsucc',txt:res.data.message})
                    location.reload()
            },
            //删除失败
            delerr(err){
                console.log(err)
            }
        }
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 75%
    overflow-y scroll
    .goods
        overflow hidden
        border-bottom 1px solid #d0d0d0
        padding-bottom 10px
        .changenum
            .goodsnumcon
                width 60px
            span 
                    border 1px solid #dddddd
                    width 20px
                    height 20px
                    line-height 20px
                    display inline-block
                    text-align center
                    margin-left 9px
        p
            font-size 14px
            width 50%
            float right
        .goodsimg
            width 80px
            height 80px
            float left
            margin-left 20px
            img 
                width 100%
                height 100%
        .ptprice
            color #ff463c
        .jfprice
            color #E67E22
    .buynow
        position fixed
        bottom 50px
        height 50px
        font-size 14px
        line-height 50px
        width 100%
        border-top 1px solid #dcdcdc
        .buyinfo
            height 100%
            float left
            width 60%
            padding-left 20px
            span 
                display block
                height 25px
                line-height 25px
            .pttotalprice
                color #ff463c
            .jftotalprice
                color #e67e22
        .buybtn
            height 100%
            float left
            width 40%
            border none 
            background #aad114
            color #fff
    .goods >>> .mint-checkbox-label
        font-size 16px!important
    .deletechecked
        color #aad114
        font-size 14px
        padding-top 20px

</style>